import React from 'react';
import {connect} from 'react-redux'
import { Form, Input,} from 'antd';
import UploadImg from '../../../components/Upload'
import style from './style.module.css'
const { TextArea } = Input;


const ShopInfo = (props) => {
    const onFinish = (values) => {  //提交
        console.log('Success:', values);
    };
    const handleName=(e)=>{ //名称
        // console.log(e.target.value)
        props.dispatch({
            type:'GET_NEWSHOP',
            payload:{
                shopName:e.target.value
            }
        })
        // setInfo({...shopInfo,shopName:e.target.value})
    }
    const handleClassify=(e)=>{ //类别
        // console.log(e.target.value)
        props.dispatch({
            type:'GET_NEWSHOP',
            payload:{
                childClassify:e.target.value
            }
        })
        // setInfo({...shopInfo,childClassify:e.target.value})
    }
    const handlekeywords=(e)=>{ //关键字
        // console.log(e.target.value)
        props.dispatch({
            type:'GET_NEWSHOP',
            payload:{
                keywords:e.target.value
            }
        })
        // setInfo({...shopInfo,keywords:e.target.value})
    }
    const handleUnit=(e)=>{ //单位
        // console.log(e.target.value)
        props.dispatch({
            type:'GET_NEWSHOP',
            payload:{
                unit:e.target.value
            }
        })
        // setInfo({...shopInfo,unit:e.target.value})
    }
    const textAreaChange = ({ target: { value } }) => {  //文本域
        props.dispatch({
            type:'GET_NEWSHOP',
            payload:{
                descrip:value
            }
        })
        // setInfo({...shopInfo,descrip:value})
    };
    const handleImgUrl= async (url)=>{//获取图片路径
        console.log(url.response&&url.response.imgUrl)
        const res=url.response&&url.response.imgUrl
        props.dispatch({
            type:'GET_NEWSHOP',
            payload:{
                coverPicture:res
            }
        })
        // setInfo({...shopInfo,coverPicture:res})
       
    }
    const {newShop}=props;
    // console.log(newShop,'newShop-Info')
   /*  
    useEffect(()=>{
        console.log(num,shopInfo,'num')
        console.log(newShop,'reducer-newshop')
        addInfo(shopInfo)
    },[shopInfo.coverPicture])
     */

    return (
        <div className={style.shopInfo}>
            <Form
                name="basic"
                layout='inline'
                labelCol={{ span: 10 }}
                labelAlign='right'
                wrapperCol={{ span: 14 }}
                onFinish={onFinish}
                initialValues={newShop}
                autoComplete="off"
            >
                <Form.Item style={{ width: '48%', marginTop: '20px' }}
                    label="商品名称"
                    name="shopName"
                    rules={[{ required: true, message: '请输入商品名称' }]}
                >
                    <Input value={newShop.shopName} onChange={handleName} placeholder="请输入商品名称" />
                </Form.Item>
                <Form.Item style={{ width: '48%', marginTop: '20px' }}
                    label="商品分类"
                    name="childClassify"
                    rules={[{ required: true, message: '请选择' }]}
                >
                    <Input value={newShop.childClassify} onChange={handleClassify} placeholder="请选择" />
                </Form.Item>
                <Form.Item style={{ width: '48%', marginTop: '20px' }}
                    label="商品关键字"
                    name="keywords"
                    rules={[{ required: true, message: '请输入商品关键字' }]}
                >
                    <Input value={newShop.keywords} onChange={handlekeywords} placeholder="请输入商品关键字" />
                </Form.Item>
                <Form.Item style={{ width: '48%', marginTop: '10px' }}
                    label="单位"
                    name="unit"
                    rules={[{ required: true, message: '请输入商品单位' }]}
                >
                    <Input value={newShop.unit} onChange={handleUnit} placeholder="请输入商品单位" />
                </Form.Item>
                <Form.Item style={{ width: '48%', marginTop: '10px' }}
                    label="商品简介"
                    name="descrip"
                    rules={[{ required: true, message: '请输入商品单位' }]}
                >
                    <TextArea
                        value={newShop.descrip}
                        onChange={textAreaChange}
                        placeholder="请输入商品单位"
                        autoSize={{ minRows: 3, maxRows: 5 }}
                    />
                </Form.Item>
                <Form.Item style={{ width: '48%', marginTop: '10px' }}
                    label="商品封面图"
                    name="coverPicture"
                >
                <UploadImg content={handleImgUrl} url={newShop?newShop.coverPicture:''}/>
                   
                </Form.Item>
                

            </Form>

        </div>
    );
}

export default connect((state)=>{
    return {
        newShop:state.newShop
    }
})(ShopInfo)  ;
